<template>
  <!-- 搜索 -->
  <view class="cu-bar search bg-white">
    <view class="search-form round">
      <text class="cuIcon-search"></text>
      <input
        v-model="keyword"
        :adjust-position="false"
        type="text"
        placeholder="好友查询"
        class="search-input"
        @input="onInput"
        @confirm="onConfirm"
        confirm-type="search"
      />
    </view>
    <view class="action" id="item2">
      <button class="cu-btn bg-green shadow-blur round" @tap="searcBlog1" v-if="chaxun">
        搜索
      </button>
      <button class="cu-btn bg-green shadow-blur round" @tap="searcBlog2" v-else>返回</button>
    </view>
  </view>
  <!-- 好友列表 -->
  <view>
    <!-- 默认最新选项卡 -->
    <view class="haoyoulie">
      <view
        class="hangzhen"
        v-for="(item, index) in tabBars"
        :key="index"
        :class="index == tabIndex ? 'gaoguan' : ''"
        @click="changeTab(index)"
        >{{ item.name }}</view
      >
    </view>

    <swiper
      :duration="150"
      :current="tabIndex"
      @change="onChangeTab"
      :style="'height:' + scrollH + 'px'"
    >
      <!-- 会默认分配索引 0 1 2 3 4 5  -->
      <swiper-item v-for="(item, index) in newsList" :key="index">
        <scroll-view
          scroll-y="true"
          :style="'height:' + scrollH + 'px;'"
          @scrolltolower="loadmore(index)"
        >
          <template v-if="item.list.length > 0">
            <!-- 列表 -->
            <block v-for="(item2, index2) in item.list" :key="index2">
              <!-- 列表样式 -->
              <view class="liebiao" hover-class="bg-light">
                <image :src="item2.picAddress" mode="scaleToFill" @tap="detaill(item2)"></image>
                <view class="nichen">
                  <text class="font-md text-dark">{{ item2.username }}</text>
                  <unibadge
                    :text="item2.phone % 2 === 0 ? '男' : '女'"
                    :type="item2.phone % 2 === 0 ? 'primary' : 'error'"
                    size="normal"
                  >
                    <text
                      v-if="item2.phone > 0"
                      class="iconfont"
                      :class="item2.phone % 2 === 0 ? 'icon-nansheng' : 'icon-nvsheng'"
                      style="font-size: small; margin-right: 10rpx"
                    ></text>
                  </unibadge>
                </view>
                <view @tap="follow1(item2, index2)" v-if="index === 1">
                  <uni-icons
                    :type="item2.isFollow === 'false' ? 'checkbox' : 'checkbox-filled'"
                    size="30"
                  ></uni-icons>
                </view>
              </view>
            </block>
            <!-- 上拉加载
            <loadMore :loadmore="item.loadmore" v-if="item.list.length > 10"></loadMore> -->
          </template>
          <template v-else>
            <!-- 无数据渲染页面 -->
            <nothing></nothing>
          </template>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
import { liaotianfriendAPI, liaotianfriendAPI1 } from '@/services/liaotian'
import nothing from '@/components/common/noThing'
import { ref, watchEffect, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
// const demo = [
//   {
//     image: '../../../../static/images/loading 加载中_爱给网_aigei_com.gif',
//     username: '小林',
//     sex: 1,
//     age: 24,
//     isFollow: true,
//   },
//   {
//     image: '../../../../static/images/loading 加载中_爱给网_aigei_com.gif',
//     username: '小林',
//     sex: 2,
//     age: 24,
//     isFollow: false,
//   },
// ]
import loadMore from './loadmore/index'
import { myStore, guanzhuStore } from '@/stores'
import { getsearchAPI, getsearchhaoyouAPI } from '@/services/shequ'

//  #ifdef MP-WEIXIN

// #endif
import UniIcons from '@/components/uni-icons/uni-icons.vue'
import unibadge from '@/components/uni-badge/uni-badge'
const user = myStore()
const guanzhu = guanzhuStore()
export default {
  components: {
    loadMore,
    unibadge,
    UniIcons,
  },
  data() {
    return {
      tabIndex: 0,
      tabIndex1: 0,
      chaxun: true,
      tabBars: [
        {
          name: '互关',
        },
        {
          name: '关注',
        },
        {
          name: '粉丝',
        },
      ],
      newsList: [],
    }
  },

  onLoad(e) {
    uni.getSystemInfo({
      success: (res) => {
        // 可用窗口高度（屏幕高度-导航栏高度-底部栏高度。） -  选项卡高度
        this.scrollH = res.windowHeight - uni.upx2px(195)
        // console.log(this.scrollH)
      },
    })
    this.changeTab(1)
    this.tabIndex1 = e.data
  },
  async onShow() {
    // 根据选项生成列表
    await this.getData()
    this.tabIndex = this.tabIndex1
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index
    },
    // 监听选项内容滑动
    onChangeTab(e) {
      this.changeTab(e.detail.current)
    },
    // 上拉加载更多
    // loadmore(index) {
    //   // 拿到当前列表
    //   let item = this.newsList[index]
    //   if (item.loadmore !== '上拉加载更多') return
    //   console.log('loadmore')
    //   console.log(item)
    //   // 修改当前加载状态
    //   item.loadmore = '加载中。。。'
    //   // 模拟数据请求

    //     // 加载数据
    //     // ... 相当于取出来当前对象可以遍历出来的内容放到了当前对象里面。
    //     // 这个可以粗糙的理解为把合并了两个一摸一样的列表，列表里面原来的内容*2了
    //     item.list = [...item.list]
    //     item.loadmore = '上拉加载更多'

    // },
    // 制作列表+上拉加载数据初始值
    async getData() {
      var arr = []
      for (let i = 0; i < this.tabBars.length; i++) {
        let obj = {
          loadmore: '上拉加载更多',
          list: [],
        }
        let res = await liaotianfriendAPI({
          id: i,
          username: user.userinfo.username,
          user: user.userinfo,
        })
        console.log(res, '数据是什么')
        if (i < 3) {
          obj.list = res.data
          for (let j = 0; j < obj.list.length; j++) {
            obj.list[j].idd = res.id
          }
        }
        arr.push(obj)
      }
      this.newsList = arr

      console.log(this.newsList, '顶顶顶顶顶顶顶顶顶顶')
      this.newsList[1].list.map((obj) => {
        if (obj.username1 === guanzhu.item.value?.username) {
          console.log('走到了')
          obj.isFollow = guanzhu.guanzhu
        }
        return {
          ...obj,
        }
      })
    },
    onPullDownRefresh1() {
      console.log('refresh')
      setTimeout(function () {
        uni.stopPullDownRefresh()
      }, 1000)
    },
    // 改变关注状态
    async follow1(item, index2) {
      console.log('措辞论文吗', this.newsList)
      console.log('item', item)
      console.log('措辞论文吗1111', index2)
      this.newsList[1].list[index2].isFollow =
        this.newsList[1].list[index2].isFollow === 'true' ? 'false' : 'true'
      let res = await liaotianfriendAPI1({
        id: 1,
        username: user.userinfo.username,
        uid: item.id,
        isFollow: this.newsList[1].list[index2].isFollow,
        item,
        user: user.userinfo,
      })

      console.log(res, '关注状态')
    },
    // 搜索好友

    async searcBlog1() {
      //  小程序的输入键盘 收起来
      if (this.keyword) {
        // loading状态
        uni.showLoading({
          title: '搜索中',
        })
        // 发送请求获取数据
        let res = await getsearchhaoyouAPI({ neiron: this.keyword, user: user.userinfo })
        console.log(res.data, '搜索好友数据')
        this.newsList[1].list = res.data
        // 隐藏loading
        uni.hideLoading()
        this.keyword = ' '
        this.chaxun = false
      } else {
        uni.showToast({
          title: '请输入搜索内容',
          icon: 'none',
        })
      }
    },
    // 返回按钮
    async searcBlog2() {
      //  小程序的输入键盘 收起来

      // loading状态
      uni.showLoading({
        title: '返回中',
      })
      // 根据选项生成列表
      this.getData()
      // 隐藏loading
      uni.hideLoading()
      this.keyword = ''
      this.chaxun = true
    },
    async detaill(data) {
      uni.navigateTo({
        url: '../../../../pagesA/user-space/index?gerenail=' + JSON.stringify(data),
      })

    },
  },
  onPullDownRefresh() {
    // 触发下拉刷新的事件
    console.log('下拉刷新')
    this.onPullDownRefresh1()
  },
}
</script>

<style scoped lang="scss">
@import url('../../../../static/assets/wxss/iconfont.css');
.haoyoulie {
  display: flex;
  padding: 2px;
  height: 100rpx;
}
.hangzhen {
  display: flex;
  align-content: center;
  justify-content: center;
  font-weight: bold;
  flex: 1;
  font-size: 30rpx;
}
.gaoguan {
  font-size: larger;
  color: #c50e0e;
}
// 列表
.liebiao {
  // 写一个好看的边框
  display: flex;
  align-content: center;

  padding: 2px;
  border-bottom: #c50e0e;
  width: 100%;
  margin-bottom: 1rpx;
  display: flex;
  align-items: center;
  height: 120rpx;
  // 写个圆角
  border-radius: 10rpx;
  // 背景色
  background-color: #fff;
  // 边框
  border: 1rpx solid #ccc;
  // 阴影
  box-shadow: 0 0 10rpx #ccc;
  // 圆角
  border-radius: 10rpx;
}
.liebiao image {
  // 写个圆角
  border-radius: 50rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  // 背景色
  background-color: #ccc;
  // 边框
  border: 1rpx solid #ccc;
  // 阴影
  box-shadow: 0 0 10rpx #ccc;
}
.nichen {
  display: flex;
  flex: 1;
  align-content: center;
  flex-direction: column;
}
// 改变样式
.bg-light {
  background-color: #969191;
}
</style>
